<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta name="Description" content="A WebAssembly image processing library that delivers blazing performance and safety/security.">

  <!-- Open Graph data / Facebook Card data -->
  <meta property="og:title" content="Photon: A high-performance WebAssembly image processing library.">
  <meta property="og:type" content="website">
  <meta property="og:url" content="https://github.com/silvia-odwyer/photon">
  <meta property="og:image" content="https://i.imgur.com/lxRBpeb.jpg">
  <meta property="og:image:alt" content="A blue package, symbolizing what webpack does.">
  <meta property="og:description" content="A WebAssembly image processing library that delivers blazing performance and can be called via JS.">
  <link rel="stylesheet" media="screen" href="https://fontlibrary.org/face/nimbus-sans-l" type="text/css"/>
  <!-- Mobile header color for Chrome, Firefox OS and Opera -->
  <meta name="theme-color" content="#2c638f">
  <!-- Mobile header color Windows Phone -->
  <meta name="msapplication-navbutton-color" content="#2c638f">
  <!-- Mobile header color for iOS Safari (supports black, black-translucent or default) -->
  <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
  <script src="https://cdn.jsdelivr.net/gh/silvia-odwyer/pixels.js/dist/Pixels.js"></script>
  <title>Photon: A WebAssembly Image Processing Library</title>
  <!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.6/ScrollMagic.min.js"></script> -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
  <!-- <script src="//instant.page/1.2.2" type="module" integrity="sha384-2xV8M5griQmzyiY3CDqh1dn4z3llDVqZDqzjzcY+jCBCk/a5fXJmuZ/40JJAPeoU"></script> -->
  <link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet">
  <script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script>
  <!-- <script src="https://cdn.jsdelivr.net/npm/animejs@3.0.1/lib/anime.min.js"></script> -->
  <!-- <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@glorious/demo/dist/gdemo.min.css">
  <script src="https://cdn.jsdelivr.net/npm/@glorious/demo/dist/gdemo.min.js"></script> -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/camanjs/4.0.0/caman.full.min.js"></script>
  <link rel="stylesheet" media="screen" href="https://fontlibrary.org/face/aileron" type="text/css"/> 
  <!-- Global site tag (gtag.js) - Google Analytics -->
  <script async src="https://www.googletagmanager.com/gtag/js?id=UA-155886834-1"></script>
  <script>
    window.dataLayer = window.dataLayer || [];
    function gtag(){dataLayer.push(arguments);}
    gtag('js', new Date());

    gtag('config', 'UA-155886834-1');
  </script>


</head>

<body>
  <main>
    <div class="landing">

      <div class="content">
        
      <header>
        <div id="navbar" class="sticky">
          <div class="container">
          <h4 class="logo">Photon</h4>
          <nav class="contright">
                <ul>
                  <li><a href="https://docs.rs/photon-rs/">Docs</a></li>
                  <li><a href="demo.html">Demo</a></li>
                  <li><a href="https://github.com/silvia-odwyer">GitHub</a></li>
                </ul>
              </nav>
            </div>
            
        </div>

      </header>

      <article class="landing_hero">
        <article class="landing_text">
          <h1>Image Processing in WebAssembly</h1>
          <p>Photon is a high-performance image processing library in WebAssembly that runs both natively and on the web. 
          </p>
          
          <div class="buttons">
            <button class="btn btn-default btn_fill pulse"><a href="https://silvia-odwyer.github.io/photon/guide">Get Started</a></button>
            <button class=" slide" id="docs"><a href="https://docs.rs/photon-rs/">Docs</a></button>
          </div>
        </article>
  
        <article class="landing_image">
          <img src="images/nine_yards.jpg" id="img"/>
          <canvas id="canvas"></canvas>
        </article>
      </article>
  
      <article class="features">
        <h2>Features</h2>
        <p>Photon outperforms even the fastest of libraries, and is powered with Rust, allowing for safe and secure image processing. </p>
  
        <ul class="features_list">
          <li data-aos="fade-up" data-aos-anchor="#docs">
            <h3>Web-Assembly Friendly</h3>
            <p>For web-based image processing, Photon is 4-10x faster than JS, leading to faster results, and less lag.  </p>
            <h5><a href="https://docs.rs/photon-rs/">Read More </a></h5>
          </li>
  
          <li data-aos="fade-up">
            <h3>Over 90 functions </h3>
            <p>Photon provides functions for every domain of image processing. </p>
            <h5><a href="https://docs.rs/photon-rs/">Read More</a></h5>
          </li>
  
          <li data-aos="fade-up"> 
            <h3>Call WASM with JS</h3>
            <p>This library's WASM functions can be called via JS, allowing for zero-cost abstraction and faster development.</p>
            <h5><a href="https://docs.rs/photon-rs/">Read More</a></h5>
          </li>
        </ul>
      </article>
  
      <article class="guide">
          <h2 class="center feature_heading">Features</h2>
  
          <section class="guide_pane large_pane">
            <section data-aos="fade-up">
              <h2>Run on the web or natively.</h2>
              <p>Photon can be executed:</p>
              <ul>
                <li>In the browser via JS</li>
                <li>Node.JS</li>
                <li>Natively with Rust</li>
              </ul>
              <p>Photon compiles to WebAssembly, which allows the execution of native-speed code in the browser and on Node.JS. 
                This leads to high-performance image processing on the web and since Photon's core library is written in Rust, it promises security and safety.
              </p>
            </section>
            <div class="tiles">
                <div class="tile">
                    <img src="images/cargo.png" id="cargo_logo">
                    <p>Photon's core library is a Rust crate, available from Cargo.</p>
                </div>
              

                <div class="tile">
                    <img src="images/js_logo.png" id="js_logo"/>
                    <p>Write code in JS without a single line of Rust.</p>
                </div>
  
                <div class="tile">
                    <img src="images/wasm_logo.png"/>    
                    <p>JS code gets exported to WebAssembly.</p>          
                </div>

            </div>
          </section>

          <section class="guide_pane med_pane" id="performance">
            <section data-aos="fade-in">
              <h2>Performance </h2>
              <p>Photon outperforms even the fastest of libraries, both natively and on the web.</p>

              <p>For full benchmark results, <a href="https://github.com/silvia-odwyer/photon/wiki/Benchmarks">check them out here</a>.</p>

              <p>Photon has greatly outperformed ImageMagick and the Python Imaging Library, as shown in the graph to the right, 
                and is on par with libvips.</p>

              <p>As for the web, the browser can take advantage of WebAssembly's near-native performance to deliver blazing-fast image 
                processing on the client-side, thus sparing you the need to process images server-side.
              </p>
            </section>
            <div class="chart">
              <canvas id="myChart"></canvas>
              <p><a href="https://github.com/silvia-odwyer/photon/wiki/Benchmarks">View full benchmarks here.</a></p>
            </div>
          </section>
            
          <section class="feature_pane">
              <section class="lhs_container" data-aos="fade-in">
                <h2>Channel/Colour Manipulation</h2>
                <p>     
                Photon provides low-level access to pixel and channel manipulation, as well as high-level functions for image correction, filtering, watermarking, and convolutions.     
                </p>
              </section>
              <div class="container">
                <div class="w">
                    <div class="p a"></div>
                    <div class="p b"></div>
                    <div class="p c"></div>
                    <div class="p d"></div>
                </div>
  
              </div>
            </section>

            <section class="guide_pane large_pane">
              <div>
                  <img src="images/futuristic.jpg">
  
              </div>
              <article class="rhs_container">
                  <h2>Image Resizing</h2>
                  <p>     
                    Resize images at lightning-speeds.
                  </p>
                  <p>High-performance image resizing with 5 different resizing algorithms to choose from, so
                    that you can choose the algorithm most suited to your use case.
                  </p>
                </article>
            </section>

            <section class="guide_pane large_pane">
                <section>
                  <h2>Image Correction</h2>
                  <p>  
                    Adjust images by correcting brightness, saturation, hues, and more, all within various colour spaces. 
                    This gives full flexibility to work in many colour spaces, leading to improved results tailored to your image.   
                     
                  </p>
                </section>
                <div>
                    <img src="images/daisies.jpg" id="img2"/>
                    <canvas id="correction_canvas"></canvas>
                </div>
              </section>

              <section class="guide_pane">
                  <div>
                      <img src="images/fuji.jpg" id="img3"/>
                      <canvas id="effects_canvas"></canvas>
                  </div>

                  <section class="rhs_container">
                      <h2>Enhance with Effects </h2>
                      <p>Photon comes with a variety of built-in effects, including:</p>
                      <ul>
                          <li><b>Convolutions</b>: Sobel filters, blurs, Laplace effects, edge detection, etc., </li>
                          <li><b>Monochrome effects</b>: Duotoning, greyscaling of various forms, thresholding, sepia, averaging RGB values</li>
                          <li><b>Filters</b>: Over 30 pre-set filters available, incorporating various effects and transformations. </li>
                        
                      </ul>
                      
                    </section>
                </section>

            <section class="guide_pane large_pane">
              <section>
                <h2> Blend Images </h2>
                <p> Functions include:</p>
              <b>Blending</b>:<p> Blend images together using 10 different techniques. </p>

              <p>Create new images from existing ones, or create new worlds from source images.</p>
  
              </section>
              <div class="container">
                  <div class="background anim_img"></div>
                  <div class="foreground anim_img"></div>
              </div>
            </section>

<!-- 
              <section class="guide_pane">
                  <section>
                    <h2> Combine with Metallic for Graphic Design </h2>
                    <p> While Photon is an image processing library, it has a sister library which allows for instant graphic creation.</p>

                    <p>This will allow you to apply text to imagery, create collages, and more.</p>
                  <button class="btn btn_fill">Animate</button>
                  </section>
                  
                  <div class="container">
                      <div class="background anim_img"></div>
                      <div class="foreground anim_img"></div>
                  </div>
                </section> -->

          <section>
            
            <section class="guide_pane large_pane"> 
              <section class="lhs_container">
                <h2>View The Demo</h2>
                <p>To see WebAssembly in action and all effects available, make sure to check out our
                <a href="demo.html">demo</a>
                , where you can test out the effects, view performance, and see if Photon is the right
                    library for your website.</p>
                <button class="btn btn_fill"><a href="demo.html">View The Demo</a></button>
              </section>

              <img src="images/demo.jpg" />

            </section>

            <section class="guide_pane" data-aos="zoom-in"> 
                <section id="get_started">
                  <h2>Get Started In Just 3 Lines of Code</h2>
                  <p>You can transform an image in just 3 lines of code, either in JS or Rust, whichever your choice may be.</p>
                  <p></p>
                  <button class="btn btn_fill"><a href="https://silvia-odwyer.github.io/photon/guide">Get Started</a></button>
                </section>

                <div id="code">
                  <img src="images/photon_code_example.jpg" />
                  <!-- <pre>
                    <code>extern crate photon;
use photon::{helpers, conv};

fn main() {
  let img = helpers::open_image("daisies.JPG");
 
  conv::sobel_vertical(&mut img);
                               
  helpers::save_image(img, "new_image.PNG");
}
                    </code>
                  </pre> -->
                </div>
  
            </section>


            <section class="guide_pane" id="demo_pane"> 
              <section id="get_started">
                <h2>Compare WebAssembly versus JavaScript</h2>
                <p>To compare JavaScript vs WebAssembly, click on one of the buttons below to see the right-hand side image edited by either JavaScript
                  or WebAssembly. </p>
                  <p>The time taken to edit the image will be displayed below.</p>
                <button id="compare_js" class="pulse">Start JS</button>
                <button id="compare_wasm" class="pulse">Start WASM</button>
                <p id="js_time">JS time: </p>
                <p id="wasm_time">WASM time: </p>
          
              </section>
          
              <div id="code">
                <img id="js_img" src="images/nine_yards.jpg" style="visibility: hidden" />
                <canvas id="js_canvas"></canvas>
              </div>
            </section>

  
          </section>
      </article>

      <h2></h2>
  
      <p>
      </p>

      <section class="guide_pane">

        <section class="lhs_container">
            <h2>Got questions? </h2>
            <p>If you have any questions, want to chat about your potential use case, or want help in getting started with Photon, be sure to shoot me a message on Spectrum or Gitter. </p>
              <button class="btn btn_outline"><a href="https://spectrum.chat/photonlibrary">Chat on Spectrum</a></button>
              <button class="btn btn_outline"><a href="https://gitter.im/photonlibrary/community">Chat on Gitter</a></button>
        
            
          </section>
          <div>
            <img src="images/fuji.jpg" id="img3"/>
            <canvas id="effects_canvas"></canvas>
        </div>
      </section>
  
      <article class="guide center cta" data-aos="fade-down">
        <h2>Ready To Get Started?</h2>
        <p></p>
  
        <button class="btn btn_fill"><a href="https://silvia-odwyer.github.io/photon/guide">Get Started</a></button>
        <button class="btn btn_outline"><a href="https://github.com/silvia-odwyer/photon#getting-started">Run The Examples</a></button>

      </article>    


  
      <footer>
        <div class="footer_lhs">
          <h1>Photon</h1>
          <p>Image processing with WebAssembly.</p>
          <p>&copy; Copyright 2020. Created by Silvia O'Dwyer.</p>
  
        </div>
  
        <div class="footer_rhs">
          <ul>
            <li>Home</li>
            <li> <a href="https://github.com/silvia-odwyer">GitHub</a></li>
            <li><a href="https://docs.rs/photon-rs/0.1.0/">Docs</a></li>
          </ul>
        </div>
      </footer>
      </div>
     </div>
      
    <script>
      AOS.init({
        // Global settings:
        disable: false, // accepts following values: 'phone', 'tablet', 'mobile', boolean, expression or function
        startEvent: 'DOMContentLoaded', // name of the event dispatched on the document, that AOS should initialize on
        initClassName: 'aos-init', // class applied after initialization
        animatedClassName: 'aos-animate', // class applied on animation
        useClassNames: false, // if true, will add content of `data-aos` as classes on scroll
        disableMutationObserver: false, // disables automatic mutations' detections (advanced)
        debounceDelay: 50, // the delay on debounce used while resizing window (advanced)
        throttleDelay: 99, // the delay on throttle used while scrolling the page (advanced)
        

        // Settings that can be overridden on per-element basis, by `data-aos-*` attributes:
        offset: 380, // offset (in px) from the original trigger point
        delay: 0, // values from 0 to 3000, with step 50ms
        duration: 400, // values from 0 to 3000, with step 50ms
        easing: 'ease', // default easing for AOS animations
        once: false, // whether animation should happen only once - while scrolling down
        mirror: false, // whether elements should animate out while scrolling past them
        anchorPlacement: 'top-bottom', // defines which position of the element regarding to window should trigger the animation

      });
      
      var js_canvas = document.getElementById("js_canvas");
      var js_ctx = js_canvas.getContext("2d");
      var js_img = document.getElementById("js_img");

      function compareJS() {
        // Select the image you wish to filter
      var img = document.getElementById("js_img")

      // First parameter is the image object, and the second is the filter you wish to apply.
      img.onload = function() {
        pixelsJS.filterImg(img, "twenties");      
      }


        Caman("#js_canvas", "images/nine_yards.jpg", function () {
           let startTime = performance.now();

           js_ctx.drawImage(js_img, 0, 0);
           this.sepia(50).render();
           this.render(function () {


           let endTime = performance.now();
           let time_taken = endTime - startTime;

           let time_elem = document.getElementById("js_time");
           time_elem.innerHTML = `JS Time: ${time_taken}ms`;
           });
         });

      }

    </script>   

  </main>

</body>
</html>